<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>vue列表添加动画</title>
	<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/element-ui/2.14.1/theme-chalk/index.min.css">
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		[v-cloak] {
			display: none;
		}
		body {
			padding: 50px;
		}
		.row {
			display: flex;
			align-items: center;
			gap: 10px;
		}

	</style>
</head>
<body>
	<div id="app" v-cloak>
		<el-form ref="form" :model="form" :rules="rules">
			<el-form-item lable="商品小料" prop="aaa">
				<a-list :list.sync="form.aaa" />
			</el-form-item>
			<el-form-item>
				<el-button @click="onSubmit()">验证</el-button>
			</el-form-item>
		</el-form>

		
	</div>
	<script src="https://cdn.staticfile.org/vue/2.6.8/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/element-ui/2.14.1/index.min.js"></script>
	<script>

		// 局部注册
		var aList = {
			template: `
				<div class="list">
					<div v-for="(item, index) in list" :key="index" class="row">
						<el-input v-model="item.name" placeholder="名称" style="width:100px;"/>
						<el-input v-model="item.price" placeholder="价格" style="width:100px;"/>
						<button type="button" @click="add">加</button>
						<button type="button" @click="del(index)">减</button>
					</div>
				</div>
			`,
			props: {
				list: {
					type: Array,
					default: () => ([])
				}
			},
			data() {
				return {

				}
			},
			watch: {
		        'list.length': {
		            handler(val) {
		                if(!val) {
		                    this.add();
		                } 
		            },
		            immediate: true
		        }
		    },
			mounted() {
				console.log(111);
			},
			methods: {
				add() {
					this.list.push({
						name: '',
						price: ''
					})
				},
				del(index) {
					this.list.splice(index, 1);
					// 这儿的$parent指向的是el-form-item
					this.$parent.$emit('el.form.blur', 'aaa');
				}
			}
		}

		var app = new Vue({
			el: '#app',
			components: {
				aList
			},
			data() {
				return {
					form: {
						aaa: []
					},
					rules: {
						aaa: [
							{trigger: 'blur', validator: (rule, value, callback) => { 
		                        if(!this.form.aaa.length) {
	                                callback(new Error('请选择商品小料'));
	                                return;
	                            } else {
	                                if(this.form.aaa.find(item => !item.name)) {
	                                    callback(new Error('请选择商品小料'));
	                                    return;
	                                } else if(this.form.aaa.find(item => !item.price)) {
	                                    callback(new Error('请输入小料金额'));
	                                    return;
	                                }
	                            }
		                        callback();
		                    }}
						]
					}
				}
			},
			mounted () {
				
			},
			methods: {
				onSubmit() {
					this.$refs.form.validate((valid) => {
	                    if(!valid) {
	                        return;
	                    }
	                    console.log('验证通过')
	                })
				}
			}
		})
	</script>
</body>	
</html>